<!--  登录页面-->

<template>
  <!--
    public文件夹内的index.html:
    视口： 就是眼睛能看到的窗口(不包含地址栏菜单栏，不包含四周的边框。 用来展示页面内容的区域)
    配置视口： 视口宽度和设备宽度相同， 初始化缩放比例1.0  (scale是缩放的意思)
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  -->

  <!-- div的宽度不用管，就是屏幕的宽度-->
  <!-- vh的全称: viewportHeight 视口高度。  设置为100，表示100%， 就是100%的高度(浏览器多高视口就是多高)-->
  <!-- 登录网页使用的是用渐变色背景， 左上角为深蓝， 右下角为浅蓝。
  使用background-image:属性，值写 线性linear-渐变gradient(括号中可以写多个颜色值，表示渐变顺序)
  45deg表示渐变的倾斜角度  (实际上除了线性渐变linear-gradient还有环形渐变) -->
  <div style="height: 100vh; background-image: linear-gradient(135deg, #1352F2, #3C82F5); overflow: hidden">
    <!-- 给此div加一个dfc保护 overflow: hidden ("dfc"可能指的是"Display Flexbox Container")  -->
    <el-container style="padding: 30px;"> <!-- style="padding: 30px;"容器的内容不要贴到左上角 -->
      <!-- 1. 头部 -->
      <el-header>
        <el-row :gutter="10">
          <el-col :span="3"> <img src="/imgs/login/logo.png" style="height: 50px"/></el-col>
          <el-col :span="1"> <img src="/imgs/login/auto.png" style="height: 50px"/></el-col>
          <el-col :span="1"> <img src="/imgs/login/verticalLine.png" style="height: 50px"/></el-col>
          <el-col :span="19">
            <span style="color:#fff;font-size:30px;font-weight:bold;">智慧车辆运营管理系统</span>
          </el-col>
        </el-row>
      </el-header>

      <!--  2. 页面主体 -->
      <el-main>
        <el-row :gutter="10"><!-- gutter:用于设置行内元素的间距，值为 10 表示间距为 10 像素 -->
          <el-col :span="16">  <img src="/imgs/login/bg.png" style="width: 100%;margin-top: 60px;"/> </el-col>
          <el-col :span="8">   <!-- bg.png图片上外边距margin-top: 60px; 和 卡片的margin-top: 80px;  是为了让左右对齐  -->
            <el-card  style="margin-top: 80px;">
              <h3 style="text-align: center">用户登录</h3> <!-- text-align: center：文字水平居中 -->
              <el-form :model="user" label-position="top">
                <el-form-item  label="用户名">
                  <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item  label="密码">
                  <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item>  <!-- @Click="login" 点击事件如果方法不需要传入参数可以省略括号 -->
                  <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
                </el-form-item>
              </el-form>  <!-- 谷歌浏览器字体大小默认是16px，修改为font-size: 14px。
              体验账号提示问题默认是在卡片中居中的所以设置text-align: center; 上下内边距是10，左右是0 -->
              <div style="color:#666;text-align: center;font-size: 14px;padding: 10px 0;">
                (体验账号:tom 密码:123456)
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>

</template>
<!--  vue3的语法规定：script标签上必须有 setup属性  -->
<script setup>
// setup 表示js的一种写法
import {ref} from "vue";
//axios需要导入
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

//{username:'',password:''} ： 是js格式的对象
const user=ref({username:'',password:''});//定义一个响应式变量user
const login= ()=>{
  console.log(user.value);
  //向登录发post请求: axios.post('url',data数据);
  axios.post(BASE_URL+'/v1/user/login',user.value) //BASE_URL是定义在main.js中的全局变量
  //axios.post('http://localhost:8080/v1/user/login',user.value)
      .then((response)=>{//then(response)是异步代码：  意思是axios.post()发请求给后端的ssm项目代码处理请求
        //response里装着响应内容，我们通过response.data得到服务器响应的数据
        // (在此期间前端页面在此期间可以进行其他操作)  then()没有继续执行需要等待后端ssm项目返回结果之后执行。
        console.log(response.data);  //  ()=>{}  是用lambda格式书写的回调函数(后端的ssm项目返回响应数据后执行此回调函数)
        if(response.data.code==2000){//如果后端的UserController返回StatusCode类中定义的2000，则说明登录成功
          ElMessage.success("登录成功");
          //localStorage只能存字符串类型的键值对
          console.log(response.data);//后端返回的JsonResult
          console.log(response.data.data);//JsonResult中的data也就是userVO
          console.log(JSON.stringify(response.data.data));//将JS对象转为JSON字符串
          //登录成功后,将后端返回的当前用户信息存入localStorage中
          localStorage.setItem('user',JSON.stringify(response.data.data));
          //登录成功后会跳转至首页（进入首页后又会跳转到用户列表页面）,因为router/index.js配置了会重定向到/user用户列表页
          router.push('/');
        }else{//登录失败
          ElMessage.error(response.data.msg);
          //登录失败清空输入框
          user.value={username:'',password:''};
        }
      });
}
</script>
<style scoped>

</style>